/* 脉搏跳动效果动画 */
/* 通过 transform: scale3d() 来实现元素的缩放 */

.pulse {
    /* 可简写为 animation: pulse 1s infinite; */
    animation-name: pulse;  /* 动画名称 */
    animation-duration: 1s; /* 动画持续时间 */
    animation-iteration-count: infinite;  /* 动画播放次数: infinite 无限次 */
}

/* 定义关键帧动画 */
@keyframes pulse {
    from { /* 动画开始时, 等同于 0% */
        transform: scale3d(1, 1, 1); 
        /* 这里的 scale3d 在显示效果上和 scale 是一样的 */
        /* 但是, scale3d 可以启用 GPU 加速, 有更好的性能表现, 并让动画不影响周围的文档流 */
    }
    50% {
        transform: scale3d(1.5, 1.5, 1.5);
    }
    to { /* 动画结束时, 等同于 100% */
        transform: scale3d(1, 1, 1);
    }
}